<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="1000px" :data="data">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>详情</span>
        <span class="el-icon-close g9 f26 poi" @click="handleCancel"></span>
      </div>
    </div>
    <div class="pl30 pr30">
      <el-row>
        <el-col :span="8">
          <span :title="data.username">{{ $t('sys.operator') }}：{{ data.username }}</span>
        </el-col>
        <el-col :span="8"><span>{{ $t('sys.account') }}：{{ data.createBy }}</span></el-col>
        <el-col :span="8"><span>{{ $t('sys.business_model') }}：{{ [data.modelCode, data.modelName] | codeName }}</span>
        </el-col>
        <el-col class="mt20" :span="8"><span>{{ $t('sys.business_service') }}：{{ [data.serviceKey, data.serviceName] |
            codeName
        }}</span></el-col>
        <el-col class="mt20" :span="8"><span>{{ $t('sys.operation_type') }}：{{ operationTypeEnum[data.operationType]
        }}</span></el-col>
        <el-col class="mt20" :span="8"><span>{{ $t('sys.data_record_id') }}：{{ data.recordKey }}</span></el-col>
        <el-col class="mt20" :span="8"><span>{{ $t('sys.trigger_behavior') }}：{{ behaviors[data.callType] }}</span>
        </el-col>
        <el-col class="mt20" :span="8"><span>{{ $t('sys.time') }}：{{ data.createDate | moment }}</span></el-col>
      </el-row>

      <!-- <el-col
      ><label>描述：</label>
        <div class="descriptions"><span>{{ data.descriptions }}</span></div></el-col
      > -->

      <el-table class="mt20" :data="data.difference" stripe border max-height="300">
        <el-table-column prop="key" label="字段" width="240" />
        <el-table-column prop="oldValue" label="变更前" />
        <el-table-column prop="newValue" label="变更后" />
      </el-table>

    </div>
    <div slot="footer" class="tr">
      <el-button type="primary" @click="handleCancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getHmservicedataupdatelogInfo } from '@/apis/paas/HmServiceDataUpdateLogController.js'
import i18n from '../../../../../i18n';

export default {
  name: 'DetailForm',
  data () {
    return {
      showVisible: false,
      data: {},
      behaviors: {
        USER_OPERATION: i18n.t('sys.user_operation'),
        API_CALL: i18n.t('sys.api_call'),
        JOB: i18n.t('sys.background_task_trigger'),
      },
      operationTypeEnum: {
        ADD: i18n.t('sys.add'),
        UPDATE: i18n.t('sys.modify'),
        DELETE: i18n.t('sys.delete'),
      },
    }
  },

  methods: {
    detailForm (id = null) {
      this.showVisible = true
      getHmservicedataupdatelogInfo({ id }).then((res) => {
        this.data = res
      })
    },

    handleCancel () {
      this.showVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.descriptions {
  margin-top: 30px;
  white-space: pre-wrap;
}
</style>
